<div class="container-fluid">
  <div class="row no-bottom-margin">

  <div id="home">
	<h1>Jugate un <span class="green">fulbo</span></h1>
	<h2>
		Ya reservaste cancha y te faltan jugadores?</br>
		Armar un partido de futbol entre amigos nunca fue tan fácil 
	</h2>
	
	<form id="newMatchForm">
	<div id="newMatch">
		<div id="type">
			<i class="fa fa-futbol-o fa-4x"></i>
			<h3>Jugadores</h3>
			<select id="matchType" name="txt_inc_Status" class="form-control input-lg" required>
				<option selected disabled>
					Número de jugadores
				</option>
			    <option ng-repeat="matchType in $root.matchTypes" value="{{matchType.id}}">
			    	{{matchType.name}}
				</option>
			</select>
			<p>Elegí que tipo de fulbito<br/>querés armar.</p>
		</div>
		<div id="field">
			<i class="fa fa-group fa-4x"></i>
			<h3>Sede</h3>
			<select id="matchField" name="txt_inc_Status" class="form-control input-lg" required>
				<option selected disabled>
					Dónde se juega
				</option>
			    <option ng-repeat="field in $root.fields" value="{{field.id}}">
			    	{{field.name}}
				</option>
			</select>
			<p>Completá con datos para que los<br/>jugadores lleguen. <a ng-click="openNewFieldModal()" href="return false;" onclick="return false;">No encontrás tu cancha?</a></p>
		</div>
		<div id="time">
			<i class="fa fa-clock-o fa-4x"></i>
			<h3>Fecha y Horario</h3>
			<div id="timeSelectors">
				<input id="matchDate" type="text"
                   class="form-control input-lg"
                   data-date-time-picker
                   data-language="{{es}}"
                   data-pick12HourFormat="false"
                   data-date-format="DD/MM/YYYY"
                   data-date-pickTime="false"
                   data-use-current="{{false}}"
                   data-location="{{testProject}}"
                   placeholder="Elegí el día"
                    />
				<input id="matchHour" type="time" class="form-control input-lg" placeholder="Horario">
			</div>
			<p>Antes de cerrar la fecha y hora,<br/>confirmá con tu cancha.</p>
		</div>
	</div>
	
	<div id="newMatchButton" class="button button-green big" ng-click="tryCreateMatch()">
		<div><span class="glyphicon glyphicon-plus darkYellow"></span> armar fulbo</div>
	</div>
	</form>
	
	<div id="registerModal" class="modal fade">
  		<div class="modal-dialog modal-dialog-center">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      			</div>
      			<div class="modal-body">
        			<i class="fa fa-group fa-xlg"></i>
					<h2 class="darkGray no-margin">Armá y jugá partidos entre amigos</h2>
					<h4>Registrate con tu cuenta de facebook</h4>
					<div id="registerButton" class="button button-blue big" ng-click="login()">
						<div><span class="glyphicon glyphicon-plus lightBlue"></span> conectar con facebook</div>
					</div>
      			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div id="newFieldModal" class="modal fade">
  		<div class="modal-dialog modal-dialog-center">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      			</div>
      			<div class="modal-body">
        			<h2 class="darkGray no-margin">Completá los datos de tu cancha</h2>
					<p style="margin: 2.1rem auto; width: 38rem;">
						<input id="newFieldName" type="text" class="form-control" placeholder="Nombre" required />
					</p>
					<p style="margin: 2.1rem auto; width: 38rem;">
						<input id="newFieldAddress" type="text" class="form-control" placeholder="Dirección" required />
					</p>
					<p style="margin: 2.1rem auto; width: 38rem;">
						<input id="newFieldTown" type="text" class="form-control" placeholder="Localidad" required />
					</p>
					<p style="margin: 2.1rem auto; width: 38rem;">
						<input id="newFieldState" type="text" class="form-control" placeholder="Provincia" required />
					</p>
					<div id="newFieldButton" class="button button-green medium" ng-click="newField()">
						<div><span class="glyphicon glyphicon-plus darkYellow"></span> crear</div>
					</div>
      			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<!-- <div style="top: 0; background-color: #FEFEFE; position: fixed; ">
		
	</div> -->
	
	</div>
	</div>
</div>


<script type="text/javascript">
(function(d){
	$(document).ready(function(){
		resizeHome();
	});
}(document));

function resizeHome(){
	var height = $(window).height();
	var headerHeight = $("#header").height();

	var homeViewHeight = height - headerHeight;
	if($("#home").outerHeight() < homeViewHeight) {
		$("#home").height(homeViewHeight);
	}
}

$(window).resize(function(){
	resizeHome();
});

</script>